/**
 * @description  产品与基准行业敞口
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import { QuickQueryC, FirstHeaderC, XYAxisChartsC } from '@/src/comps';

class ProductAndBenchmarkIndustryExposure extends PureComponent {
  constructor() {
    super();
    this.state = {
      type: '1',
      data: {
        xAxis: [],
        series: [],
      },
    };
  }

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { equityIndustryRiskM } = this.props;

    if (JSON.stringify(nextProps.equityIndustryRiskM.searchData) !== JSON.stringify(equityIndustryRiskM.searchData) || nextProps.industryType !== this.props.industryType) {
      if (nextProps.equityIndustryRiskM.searchData && nextProps.industryType) {
        this.getData({ ...nextProps.equityIndustryRiskM.searchData, type: this.state.type, industryType: nextProps.industryType });
      }
    }
  }

  //获取数据
  getData = (payload) => {
    this.setState({
      data: {},
    });
    if (payload?.industryType && payload?.type) {
      this.props.dispatch({
        type: 'equityIndustryRiskM/getIndustryExposureContrast',
        payload: {
          ...payload,
        },
        callback: (data) => {
          this.setState({
            data: data.data,
          });
        },
      });
    }
  };

  typeOnChange = (e) => {
    const { equityIndustryRiskM, industryType = '' } = this.props;
    const { searchData } = equityIndustryRiskM;
    if (searchData) {
      this.setState({ type: e });
      this.getData({ ...equityIndustryRiskM.searchData, industryType: industryType, type: e });
    } else {
      message.info('查询条件已变更，请重新查询后再进行操作');
    }
  };

  render() {
    const { data, type } = this.state;
    const { xAxis = [], series } = data;

    return (
      <div style={{ marginTop: '20px' }}>
        <FirstHeaderC title='产品与基准行业敞口' />
        <div style={{ marginBottom: '20px' }}>
          <QuickQueryC
            dataSource={[
              { value: '1', title: '最新' },
              { value: '2', title: '期间平均' },
            ]}
            initialValue={type}
            onChange={this.typeOnChange}
          />
        </div>

        <XYAxisChartsC
          series={series}
          xAxis={xAxis}
          height={358}
          dataZoom={true}
          // yAxisUnit={['单位(%)']}
          type='bar'
        />
      </div>
    );
  }
}
export default connect(({ equityIndustryRiskM, loading }) => ({
  equityIndustryRiskM,
  loading: loading.effects['equityIndustryRiskM/getIndustryExposureContrast'],
}))(ProductAndBenchmarkIndustryExposure);
